blob: 2f88fcff0c875628dfa7039476ec3422c149f208 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
import { getCollection } from "astro:content";
import Terminal from "@layouts/Terminal.astro";
import BlogItem from "@components/BlogItem.astro";
import Link from "@components/Link.astro";
import TerminalBorder from "@components/TerminalBorder.astro";
export async function getStaticPaths() {
const blogEntries = await getCollection("blogs");
return blogEntries.map((blog) => ({
params: { slug: blog.slug },
props: { entry: blog },
}));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
const blogs = await getCollection("blogs");
const sortedBlogs = blogs.sort((a, b) => +b.data.date - +a.data.date);
const currentIndex = sortedBlogs.findIndex((blog) => blog.slug === entry.slug);
const previousBlog = sortedBlogs[currentIndex + 1] || undefined;
const nextBlog = sortedBlogs[currentIndex - 1] || undefined;
---
<Terminal path="blogs/">
<div class="w-full h-[85svh] sm:h-[30vw] overflow-y-auto pr-[1.25vw] border-box">
<div class="text-[130%] h-full">
<div class="text-[110%]">
<BlogItem
title={entry.data.title}
description={entry.data.description ?? ""}
date={entry.data.date}
/>
</div>
<div class="markdown">
<Content components={{ a: Link }} />
</div>
<div class="mt-[-1vw] px-[0.1vw] py-[0.625vw] grid grid-cols-2 gap-[1.25vw]">
{
previousBlog ? (
<TerminalBorder header="Previous Blog">
<span class="text-[var(--secondary)] truncate flex-1">
<Link href=`/blogs/${previousBlog.slug}` newTab={false}>
vim ~/blogs/{previousBlog.slug}.md
</Link>
</span>
</TerminalBorder>
) : (
<div class="min-w-0 invisible" />
)
}
{
nextBlog ? (
<TerminalBorder header="Next Blog">
<div class="w-full flex items-center">
<span class="text-[var(--secondary)] truncate flex-1">
<Link href=`/blogs/${nextBlog.slug}` newTab={false}>
vim ~/blogs/{nextBlog.slug}.md
</Link>
</span>
</div>
</TerminalBorder>
) : (
<div class="min-w-0 invisible" />
)
}
</div>
</div>
</div>
</Terminal>
<style is:global>
.markdown {
user-select: text;
font-size: 1.1rem;
}
.markdown a {
display: inline-block;
font-weight: normal;
}
.markdown code {
background: #333333;
color: var(--accent);
padding: 0 0.5em;
}
.markdown ul {
list-style-type: square;
margin-left: 1em;
margin-bottom: 1em;
font-size: 90%;
}
.markdown li {
margin-bottom: 0.5em;
}
.markdown p {
margin-bottom: 1em;
user-select: text;
}
.markdown strong {
font-weight: bold;
}
.markdown h2 {
color: var(--secondary);
font-size: 125%;
margin-bottom: 0.5em;
}
.markdown h3 {
color: var(--secondary);
font-size: 110%;
margin-bottom: 0.25em;
}
.expressive-code {
margin-bottom: 1em;
}
</style>
|
